<template>
  <div class="bg">
    <div class="header">
      <div class="date">{{ datestr }}</div>
    </div>
    <div class="content">
      <div class="title-bar">
        <div class="title"></div>
        <div class="legend">
          <!-- ⩾⩽ -->
          <div class="green"><i></i>&ge;80%</div>
          <div class="orange"><i></i>&ge;50%</div>
          <div class="red"><i></i>&ge;0%</div>
        </div>
      </div>

      <div class="list-wrapper">
        <div class="th">
          <span>机台号</span>
          <span>产品名称</span>
          <span>上机时间</span>
          <span v-for="item in 12" :key="item">{{ item }}</span>
          <span>效率</span>
        </div>
        <ul ref="listRef" @mouseenter="mouseIn" @mouseleave="mouseOut">
          <li v-for="(item, index) in list" :key="index">
            <span>{{ item.JT }}</span>
            <span>{{ item.CP }}</span>
            <span>{{ item.SJRQ }}</span>
            <div v-for="(item2, index2) in item.hourDetail" :key="index2" class="hour">
              <i v-for="(item3, index3) in item2.minutesDetail" :key="index3" :class="calcColor(item3)"></i>
              <div class="hourP" v-show="item2.hourJhms > 0">{{ item2.hourSjms }} / {{ item2.hourJhms }}</div>
            </div>
            <span class="productivity">{{ item.productivity }}%</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'

// 日期时间
const datestr = ref()
let timer1
const getTime = () => {
  timer1 = setInterval(() => {
    datestr.value = dayjs().format("YYYY-MM-DD HH:mm:ss")
  }, 1000)
}

const listRef = ref()
let scrollTop = ref(0) // 滚动高度
let isBottom = false // 是否触底
let timer2
let timer3
const scroll = () => {
  timer2 = setInterval(() => {
    scrollTop.value++
    listRef.value.scrollTop = scrollTop.value
    // 滚动到底部3秒后从头开始
    if (scrollTop.value + listRef.value.clientHeight >= listRef.value.scrollHeight) {
      isBottom = true
      clearInterval(timer2)
      timer3 = setTimeout(() => {
        scrollTop.value = 0
        isBottom = false
        scroll()
      }, 3000)
    }
  }, 40)
}

// 鼠标移入暂停滚动
let isMouseIn = false
const mouseIn = () => {
  isMouseIn = true
  pause()
}
const mouseOut = () => {
  isMouseIn = false
  play()
}

const pause = () => {
  clearInterval(timer2)
  clearTimeout(timer3)
}
const play = () => {
  scroll()
}



// 获取列表
// 十分钟获取一次
let timer4 = setInterval(() => {
  // 数据对接完再测试
  // getList()
}, 10 * 60 * 1000)
let isFirst = true // 是否是第一次获取
const list = ref([])

const getList = async () => {
  const response = await fetch('/jiashuo/data/board3.json')
  const listData = await response.json()
  list.value = listData
  // 如果不是第一次获取，先停止定时器再重新开启
  if (!isFirst) {
    pause()
  }
  isFirst = false
  if (!isMouseIn) {
    scroll()
  }

  // 改数据结构
  // [
  //   {
  //     jt: 1,
  //     cp: 'aaaa',
  //     zjhms: 1000, // 总计划模数
  //     zsjms: 800, // 总实际模数
  //     hourDetail: [
  //       {
  //         hourJhms: 100, // 一小时计划模数
  //         hourSjms: 80, // 一小时实际模数
  //         minutesDetail: [
  //           {jsms:100, sjms:80}, // 10分钟计划模数、实际模数
  //           {jsms:100, sjms:80},
  //           {jsms:100, sjms:80},
  //           {jsms:100, sjms:80},
  //           {jsms:100, sjms:80},
  //           {jsms:100, sjms:80},
  //         ]
  //       },
  //     ]
  //   }
  // ]
  for (let i of list.value) {
    i.zjhms = 0 // 总计划模数
    i.zsjms = 0 // 总实际模数
    i.hourDetail = []
    for (let j = 0; j < 72; j++) {
      i.zjhms += i.DETAIL[j].JHMS
      i.zsjms += i.DETAIL[j].SJMS
      if (j % 6 == 0) {
        i.hourDetail.push({
          hourJhms: i.DETAIL[j].JHMS, // 一小时计划模数
          hourSjms: i.DETAIL[j].SJMS, // 一小时实际模数
          minutesDetail: [i.DETAIL[j]],
        })
      } else {
        let index = Math.floor(j / 6)
        i.hourDetail[index].hourJhms += i.DETAIL[j].JHMS
        i.hourDetail[index].hourSjms += i.DETAIL[j].SJMS
        i.hourDetail[index].minutesDetail.push(i.DETAIL[j])
      }
    }
    i.productivity = (i.zsjms / i.zjhms * 100).toFixed(2)
  }
  // console.log('===', list.value)
}

const calcColor = (item) => {
  let p = item.SJMS / item.JHMS
  let color
  if (!item.JHMS) {
    return ''
  }
  if (p >= .8) {
    color = 'green'
  } else if (p >= .5) {
    color = 'orange'
  } else {
    color = 'red'
  }
  return color
}


onMounted(() => {
  getTime()
  getList()
})
onUnmounted(() => {
  clearInterval(timer1)
  clearInterval(timer2)
  clearTimeout(timer3)
  clearInterval(timer4)
});
</script>

<style lang="scss" scoped>
.bg {
  height: 100vh;
  background: url("@/assets/img/bg3.jpg");
  background-size: 100% 100%;
}

.header {
  height: 80px;
  height: 7.41vh;

  .date {
    position: absolute;
    right: 3.2%;
    top: 1.6vh;
    font-size: 16px;
    color: #16c1c0;
  }
}

.content {
  height: calc(100% - 7.41vh - 0vh);
  margin: 0vh 1% 0 1%;
  padding: 0 1.5vw 0;
  border-radius: 8px;

  // background: #2c344b;
  .title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2vh;
    color: #fff;

    // border: 1px solid #fff;
    .title {
      font-size: 22px;
    }
  }

  .legend {
    display: flex;
    font-size: 18px;
    color: #fff;

    div {
      display: flex;
      align-items: center;
      margin-right: 20px;

      i {
        width: .8vw;
        height: .8vw;
        margin-right: 4px;
        border: 3px double #fff;
        border-radius: 50%;
      }

      &.green i {
        border-color: #2ab65f;
      }

      &.orange i {
        border-color: #e05e00;
      }

      &.red i {
        border-color: #e60104;
      }
    }
  }
}

.list-wrapper {
  height: calc(100% - 4vh - 1vh);
  margin-top: 1vh;
  border: 1px solid #bbb;
}

.th {
  display: flex;
  height: 3.5vh;
  font-size: 18px;
  color: #fff;
  border-bottom: 1px solid #bbb;

  span {
    flex-shrink: 0;
    flex-grow: 1;
    width: 6.25%;
    text-align: center;
    line-height: 3.5vh;
    white-space: nowrap;
    border-right: 1px solid #bbb;
    // &:nth-child(1){
    //   width: 8%;
    // }
    // &:nth-child(4){
    //   width: 4%;
    // }
    &:nth-last-child(1){
      border-right: none;
    }
  }
}

ul {
  position: relative;
  height: calc(100% - 3.5vh);
  overflow: hidden;

  // border: 1px solid #f00;
  li {
    display: flex;
    // height: 268px;
    height: 4vh;
    font-size: 16px;
    color: #fff;
    border-bottom: 1px solid #bbb;

    >span {
      flex-shrink: 0;
      width: 6.25%;
      white-space: nowrap;
      text-align: center;
      line-height: 4vh;
      border-right: 1px solid #bbb;
      // &:nth-child(1){
      //   width: 8%;
      // }
      // &:nth-child(4){
      //   width: 4%;
      // }
      &:nth-last-child(1){
        border-right: none;
      }
    }

    .hour {
      position: relative;
      display: flex;
      width: 6.25%;
      border-right: 1px solid #ddd;
      i {
        width: calc(100%/6);

        &.green {
          background: #2ab65f;
        }

        &.orange {
          background: #e05e00;
        }

        &.red {
          background: #e60104;
        }
      }

      .hourP {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
      }
    }
  }
}
</style>